<template>
	<view class="content">
		<downloadPop :file_path="file_path"></downloadPop>
		<view class="finishch">
			<view class="section-0">
				<view class="section-body">
					<view class="list">
						<view class="problem-wrapper" v-show="list.length<1">
							<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
							<view class="">~ 空空如也 ~</view>
						</view>
						<view class="item" v-for="(item, index) in list" :key="index" v-show="list.length>=1">
							<view class="parent" >
								<view class="id">{{item.name}}</view>
								<view class="name"><view class="text">文件编号</view><text>：</text> {{item.file_no}}</view>
								<view class="name"><view class="text">时间</view><text>：</text>{{item.file_date ? item.file_date.substring(0, 10) : '-'}}</view>
								<view class="name">
									<view class="text">
										附件
									</view>
									<text>：</text>
									<u-button type="primary" class="button" @click="handleDownLoad(item.file_path)">附件下载</u-button>
								</view>
								<!-- <view class="fujian" @click="handleDownLoad(item.file_path)"><view class="text">附件</view><text>：</text><text class="text_a">{{item.file_name}}</text></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import downloadPop from '@/components/download_pop/index.vue';
	import { preliminaryDocumentsListApi } from '@/api/statistics.js';
	import { getFileDetails } from "@/api/project.js";
	import { mapGetters } from 'vuex'
	export default {
		// onLoad() {
		// 	this.getProjectListApi()
		// },
		components: { downloadPop },
		data() {
			return {
				file_path: '',
				list: [],
			}
			},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		created() {
			this.getProjectListApi()
		},
		methods: {
			// 附件下载
			handleDownLoad(url){
					this.file_path = '';
					setTimeout(() => {
						this.file_path = url;
					}, 0);
			},
			getProjectListApi() {
					const obj={
						project_id: this.curProject.id,
						pageSize:'9999999'
					}
					getFileDetails(obj).then(res=>{
						console.log(res.data.data,2313);
						this.list=res.data.data.data
						// res.data.data.forEach(item=>{
						// 	if(item.type==obj.type){
						// 		this.list.push(item)
						// 	}
						// })
					})
				
			}
		},
	}
</script>
<style lang="scss" scoped>
	.content{
		background-color: #2e5efe;
		.finishch{
			width: 100%;
			background-color: #0534d6;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			.section-0 {
				width: 100%;
				position: relative;
				z-index: 10;
				.section-body {
					width: 100%;
					height: 100%;
					border-top-left-radius: 50rpx;
					border-top-right-radius: 50rpx;
					background-color: #fff;
					overflow: hidden;
					padding-bottom: 100rpx;
					.list {
						width:  100%;
						box-sizing: border-box;
						.item {
							width: 100%;
							padding-top: 50rpx;
							.parent {
								// width: 99%;
								@include clear();
								margin: 0 40rpx;
								padding: 40rpx;
								border-radius: 40rpx;
								background-color: #FFFFFF;
								webkit-box-shadow:0px 0px 10px #cccccc;
								moz-box-shadow:0px 0px 10px #cccccc;
								box-shadow: 0px 0px 10px #cccccc;
								.id{			
									padding-bottom: 20rpx;
									font-weight: bold;
									border-bottom: 2rpx solid #e3e8f5;
								}
								.name {
									width: 600rpx;
									margin-top: 30rpx;
									font-size: 26rpx;
									font-weight: bold;
									text-overflow:ellipsis;
									white-space:nowrap;
									letter-spacing: 2rpx;
									// float: left;
									display: flex;
									.text{
										font-size: 26rpx;
										color: #99A3AF;
										width: 110rpx;
										display: inline-block;
										text-align: justify;
										text-align-last: justify;
									}
									text{
										color: #99A3AF;
									}
									.button{
										font-size: 26rpx;
										width: 150rpx;
										height: 40rpx;
										margin-left: 0rpx;
									}
								}
								// .fujian{
								// 	color: #99A3AF;
								//     white-space: normal;
								// 		width: 600rpx;
								// 		margin-top: 20rpx;
								// 		font-size: 26rpx;
								// 		font-weight: bold;
								// 		text-overflow:ellipsis;
								// 		white-space:nowrap;
								// 		letter-spacing: 2rpx;
								// 		// float: left;
								// 		display: flex;
								// 		.text{
								// 			font-size: 26rpx;
								// 			width: 110rpx;
								// 			display: inline-block;
								// 			text-align: justify;
								// 			text-align-last: justify;
								// 		}
								// 		.text_a{
								// 			width: 450rpx;
								// 			color: #0066CC;
								// 			white-space: normal;
								// 		}
								// }
								}
								}
								}
								.problem-wrapper{
									color: #808080;
									margin: 0 auto;
									text-align: center;
									image{
										margin-top:300rpx ;
										width: 200rpx;
										height: 200rpx;
									}
								}
					}
				}
		}
	}
	.cs{
		font-size: 15px;
		padding: 20px 0 20px 30px;
		color: #65a0f4;
	}
	.cs span{
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 10px;
	}
</style>